<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/order.css" />
</head>
<body class="gray">
	<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
	  <div class="mui-scroll" >
	  		<div id="vueMain" class="loading">
	  			
	  			<div v-if="list.length==0">
	  				<p style="padding: 50px 0; text-align: center;">您没有订单</p> 
	  			</div>
	  			<template v-for="(item,index) in list" >
	  				<div class="item" >
			  			<div class="title">
			  				<span class="mui-pull-right">{{item.order_status_name}}</span>
			  				<div>{{item.order_no}}</div>
			  			</div>
			  			<div class="product">
			  				<ul class="mui-table-view">
			  					<li class="mui-table-view-cell mui-media" >
			  						<a href="javascript:;"  >
			  							<img class="mui-media-object mui-pull-left link" _id="detail" _href="detail.html" :_extras="'pid='+item.goods_id" :data-load="item.img" src="../icon/mask-big.jpg">
			  								<div class="mui-media-body link" _id="refundover" _href="refundover.html" _title="退款详情" :_extras="'order_no='+item.order_no" v-if="item.order_status==7 || item.order_status==8 || item.order_status==10" >
			  				               <div class="name">{{item.name}}</div>
			  				               <p v-if="item.start_time==item.end_time">{{item.start_time}} 共 {{item.goods_nums}} 天</p>
			  				               <p v-else>{{item.start_time}}至{{item.end_time}} 共 {{item.goods_nums}} 天</p>
			  				               <p><span v-if="item.stro">{{item.stro}}</span> <span v-if="item.intro"> {{item.intro}}</span></p>
			  				               <p>数量:{{item.amount}}</p>
			  				            </div>
			  							<div class="mui-media-body link" _id="orderStatus" _href="orderStatus.html" _title="订单详情" :_extras="'order_no='+item.order_no" v-else>
			  								<div class="name">{{item.name}}</div>
			  				               	 <p v-if="item.start_time==item.end_time">{{item.start_time}} 共 {{item.goods_nums}} 天</p>
			  				                 <p v-else>{{item.start_time}}至{{item.end_time}} 共 {{item.goods_nums}} 天</p>
			  				               	<p><span v-if="item.stro">{{item.stro}}</span> <span v-if="item.intro"> {{item.intro}}</span></p>
			  				               	<p>数量:{{item.amount}}</p>
			  							</div>
			  						</a>
			  					</li>
			  				</ul>
			  			</div>
			  			<div class="item-footer">
							<p>实付款：<span class="money-color">¥ {{item.order_amount}}</span></p>
							<button type="button" class="mui-btn bexta-btn bexta-btn-red mui-btn-outlined fuweikuan" v-if="item.order_status==3" :data-order="item.order_no">付尾款</button>
							<button type="button" class="mui-btn bexta-btn btn-default mui-btn-outlined cancleOrder" v-if="item.order_status==1" :data-idx="index">取消订单</button>
							<button type="button" class="mui-btn bexta-btn btn-default mui-btn-outlined link" _id="refund" _href="refund.html" _title="退款" :_extras="'order_no='+item.order_no" v-if="item.order_status==3">取消订单</button>
							<button type="button" class="mui-btn bexta-btn mui-btn-outlined link" v-if="item.order_status==4" _id="refund" _href="refund.html" _title="申请退款" :_extras="'order_no='+item.order_no">申请退款</button>
							<button type="button" class="mui-btn bexta-btn bexta-btn-red mui-btn-outlined confirmstart" :data-idx="index" :data-order="item.order_no" v-if="item.order_status==4" >确认开工</button>
							<button type="button" class="mui-btn bexta-btn bexta-btn-red mui-btn-outlined link" v-if="item.order_status==6" _id="sendComment" _href="sendComment.html" _title="发布评论" :_extras="'order_no='+item.order_no+'&img='+item.img">评价晒单</button>
			  			</div>
			  		</div>
	  			</template>
	  		</div>
	  </div>
	</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps , views, user;
	mui.plusReady(function () {
	    views = bexta.getWebview();
	    user = bexta.getStorage(USER);
		   getData(function(res){
		   		initVue(res,res.length, 10);
		   },0, 10,views.orderType);
	});
	function getData(cfun,f,l, t){
		 bexta.ajax(api.order_list, function(res) {
	    		cfun(res);
	    }, {data:{firstrow:f, listrow:l, uid:user.uid, type:t || apps.type}});
	}
	function initVue(res, first, last){
		apps = new Vue({
			el:"#vueMain",
			data:{
				type:views.orderType,
				first:first,
				last:last,
				list:res
			},
			mounted:function(){
				bexta.imageLoad('[data-load]');
				document.querySelector('.loading').classList.add('loadRun');
				initMounted();
			},
			updated:function(){
				bexta.imageLoad('[data-load]');
			}
		});
	}
	function removeOrder(order_no, idx){
		if( order_no == apps.list[idx].order_no){
			apps.list.splice(idx, 1);
		}else{
			//如果idx下的订单号跟获取的不一至，以获取的为准
			mui.each(apps.list, function(index){
				if( this.order_no == order_no ){
					apps.list.splice(index,1);
					bexta.imageLoad('[data-load]');
				}
			})
		}
	}
	function initMounted(){
		//删除订单
		mui('#vueMain').on('tap', '.removeOrder', function(){
			var otype = this.getAttribute('data-type');
			if( otype == 0 ){
				mui.alert('删除时错误!!快反馈给我们');
				return ;
			}
			var no = this.getAttribute('data-order'),
				idx = this.getAttribute('data-idx');
			mui.confirm("您确定要删除这个订单?",TITLE, CONFIRM, function(item){
				if( item.index == 1 ){
					bexta.ajax(api.del_order, function(res,msg){
						mui.toast(msg);
						removeOrder(no, idx);
						mui.fire(bexta.parentsView(), 'updateOrderStatus');
					},{
						data:{
							type:otype,
							order_no:no,
							uid:user.uid
						}
					});
				}
			});
		});
		//确认开工
		mui('#vueMain').on('tap', '.confirmstart', function(){
			var order = this.getAttribute('data-order');
			var idx = this.getAttribute('data-idx');
			bexta.ajax(api.confirm_start_order, function(res,msg){
				mui.toast(msg);
				if( !res ){
					apps.list[idx].order_status = 5;
				}
			}, {data:{uid:user.uid, order_no:order}});
		});
		
		//
		mui('#vueMain').on('tap', '.cancleOrder', function(){
				var idx = this.getAttribute('data-idx');
				var data = apps.list[idx].order_no;
				bexta.ajax(api.del_order, function(res,msg){
					mui.toast(msg);
					if( !res ){
						apps.list.splice(idx, 1);
						//重置上拉加载
						mui('#refreshContainer').pullRefresh().refresh(true);
					}
				},{data:{uid:user.uid, order_no:data, type:3}});
		});
		//
		mui('#vueMain').on('tap', '.fuweikuan', function(){
			var order = this.getAttribute('data-order');
			bexta.ajax(api.update_order, function(res){
				bexta.openWithTitle({
					id:'pay',
					url:'pay.html',
					extras:{
						data:res
					}
				}, {
					title:{
						text:"订单支付"
					}
				});
			}, { data:{uid:user.uid, order_no:order, is_pay:1}});
		});
		if( mui.os.android ){
			//android下拉刷新,是使用的双webview,所以只能使用原生的了
			mui.init({
				beforeback:function(){
					mui.fire(plus.webview.getWebviewById('center'), 'updateOrderStatus');
				},
			  pullRefresh : {
			    container:'#refreshContainer',
			    up : {
			      callback :upfresh 
			    }
			  }
			});
			views.setPullToRefresh({
		    		support: true,
				height: 50 + bexta.getStorage() + 'px',
				range: '100px',
				style: 'default',
				contentdown:{
					caption:"下拉可刷新"
				},
				contentover:{
					caption:"释放刷新"
				},
				contentrefresh:{
					caption:"正在刷新"
				}
		    }, downfresh);
			
		}else{
			mui.init({
				beforeback:function(){
					mui.fire(plus.webview.getWebviewById('center'), 'updateOrderStatus');
				},
			  pullRefresh : {
			    container:'#refreshContainer',
			    down : {
			      callback :downfresh
			    },
			    up : {
			      callback :upfresh 
			    }
			  }
			});
		}
		
		
	}
	function downfresh() {
		var self = this;
		getData(function(res){
			apps.list = res;
			if(mui.os.android){
				views.endPullToRefresh();
			}else{
				mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
			}
			
		},0, apps.first);
	}
	function upfresh(){
		var self = this;
		getData(function(res){
			if( res.length == 0 || res.length < apps.last ){
				self.endPullupToRefresh(true);
			}
			if( res.length == apps.last ){
				self.endPullupToRefresh(false);
			}
			if( res.length !=0 ){
				apps.first = apps.first + res.length;
				mui.each( res, function(){
					apps.list.push( this );
				} )
			}
		},apps.first, apps.last);
	}
//退款后，反回刷新这个页面

window.addEventListener('reloadOrder', function(evt){
	var order= evt.detail.order_no;
	mui.fire(bexta.parentsView(), 'updateOrderStatus');
	mui.each(apps.list, function(index){
		if( this.order_no == order ){
			apps.list.splice(index, 1);
		}
	});
});

window.addEventListener('toggleTab', function(evt){
	var otype = evt.detail.typed;
	apps.type = otype;
	 bexta.ajax(api.order_list, function(res) {
	 	apps.first = res.length;
	 	apps.list = res;
	 	mui('#refreshContainer').pullRefresh().refresh(true);
		mui.later(function(){
			mui('#refreshContainer').pullRefresh().scrollTo(0,0)
		}, 100)
	 }, {data:{firstrow:0, listrow:10, uid:user.uid, type:otype}});
});

</script>
</body>
</html>